<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
  <title>滑动事件 - JRoll</title>
  <link rel="stylesheet" href="../css/demo.css">
  <script src="../download/jroll.min.js"></script>
</head>
<body>
  <div id="scrollevent">
    <div id="wrapper">
      <ul id="scroller"></ul>
    </div>
    <section id="info">
      <p>开始位置：y=<span id="start">0</span></p>
      <p>滚动位置：y=<span id="scroll">0</span></p>
      <p>结束位置：y=<span id="end">0</span></p>
    </section>
  </div>
  <script>
    (function (){
      var str = "";
      for (var i=1; i<=100; i++) {
        str += "<li>"+i+"</li>";
      }
      document.getElementById("scroller").innerHTML = str;
    })();

    var jroll = new JRoll("#wrapper", {scrollBarY:true, bounce:true});

    var start = document.getElementById("start");
    var scroll = document.getElementById("scroll");
    var end = document.getElementById("end");

    jroll.on("scrollStart", function() {
      start.innerText = this.y;
    });
    jroll.on("scroll", function() {
      scroll.innerText = this.y;
    });
    jroll.on("scrollEnd", function() {
      end.innerText = this.y;
    });
  </script>
</body>
</html>